<template>
  <layout 
    tabbar="/pages/friends/index" 
    navbar="none" 
    :showBack="false" 
    class="dark-theme"
    navbarBackgroundColor="#020303"
  >
    
    <view class="friends-page">
      <!-- 使用z-paging分页加载用户 -->
      <z-paging 
        ref="paging" 
        v-model="users" 
        @query="queryList"
        :default-page-size="20"
        :auto="true"
        :bg-color="'#020303'"
        :loading-more-enabled="true"
        :show-refresher-when-reload="true"
        :refresher-threshold="80"
        :refresher-default-text="'下拉刷新'"
        :refresher-pulling-text="'释放立即刷新'"
        :refresher-refreshing-text="'加载中...'"
        :loading-more-custom-style="{color: '#6c5ce7'}"
        :show-loading-more-no-more-view="false"
        :hide-loading-more-when-no-more-and-inside-of-paging="true"
        :empty-view-text="'暂无用户'"
        :empty-view-reload-text="'点击刷新'"
        :show-empty-view-reload="true"
        :auto-show-back-to-top="false"
        :auto-clean-list-when-reload="true"
        :fixed="true"
        :safe-area-inset-bottom="true"
        :auto-height="true"
		:autoHeightAddition="-50"
        :system-container-height="true"
        :refresher-enabled="true"
        @scrolltolower="handleScrollToLower"
        @scrolltoupper="handleScrollToUpper"
        @scroll="handleScroll"
        @refresherRefresh="onRefresh"
        @empty-view-reload="handleEmptyViewReload"
      >
        <template #top>
			<view>
				<view :style="{paddingTop: vuex_status_bar_height + 22 + 'px' }" class="custom-nav tn-flex tn-flex-col-center tn-flex-row-between">
				  <view class="header-left">
				    <view class="icon-btn" @tap.stop="showFilter">
				      <text class="tn-icon-filter icon-text"></text>
				    </view>
				  </view>
				  <view class="header-title">交友</view>
				  <view class="header-right">
				    <!-- 为了保持布局平衡，添加一个空的占位元素 -->
				    <view class="placeholder-btn"></view>
				  </view>
				</view>
				<view :style="{height: vuex_status_bar_height + 'px'}"></view>
			</view>
        </template>
        <template #bottom>
          <view style="height: 120rpx;"></view>
        </template>
        <view class="content-wrapper">
          <!-- 筛选选项卡（固定在顶部） -->
          <view class="sticky-filter-tabs">
            <scroll-view scroll-x="true" class="filter-tabs" show-scrollbar="false" enhanced :fast-deceleration="true">
              <view 
                :class="['filter-tab', activeFilter === 'all' ? 'active' : '']" 
                @tap="setFilter('all')"
              >全部</view>
              <view 
                :class="['filter-tab', activeFilter === 'nearby' ? 'active' : '']" 
                @tap="setFilter('nearby')"
              >附近的人</view>
              <view 
                :class="['filter-tab', activeFilter === 'girls' ? 'active' : '']" 
                @tap="setFilter('girls')"
              >女生</view>
              <view 
                :class="['filter-tab', activeFilter === 'boys' ? 'active' : '']" 
                @tap="setFilter('boys')"
              >男生</view>
              <view 
                :class="['filter-tab', activeFilter === 'tagged' ? 'active' : '']" 
                @tap="setFilter('tagged')"
              >有兴趣</view>
              <view 
                :class="['filter-tab', activeFilter === 'verified' ? 'active' : '']" 
                @tap="setFilter('verified')"
              >已认证</view>
              <view 
                :class="['filter-tab', activeFilter === 'vip' ? 'active' : '']" 
                @tap="setFilter('vip')"
              >VIP</view>
              <view 
                :class="['filter-tab', activeFilter === 'online' ? 'active' : '']" 
                @tap="setFilter('online')"
              >在线</view>
            </scroll-view>
            <view class="active-filter-indicator"></view>
          </view>
          
          <!-- 推荐用户 - 现在在z-paging内部与用户列表同级 -->
          <view class="recommendation-section">
            <view class="section-title">
              <view class="title-text">今日推荐</view>
              <view class="refresh-btn" @tap="refreshRecommendations">
                <text class="tn-icon-refresh"></text>
                <text>换一批</text>
              </view>
            </view>
            <scroll-view 
              scroll-x="true" 
              class="recommended-users" 
              show-scrollbar="false"
              :enhanced="true"
              :show-scrollbar="false"
              :paging-enabled="true"
              :fast-deceleration="true"
            >
              <!-- 骨架屏 -->
              <template v-if="isLoadingRecommendations">
                <view class="skeleton-user" v-for="i in 3" :key="i"></view>
              </template>
              
              <template v-else-if="recommendedUsers.length === 0">
                <view class="empty-recommendations">
                  <text class="tn-icon-info"></text>
                  <text>暂无推荐用户</text>
                </view>
              </template>
              
              <template v-else>
                <view 
                  class="recommended-user" 
                  v-for="(user, index) in recommendedUsers" 
                  :key="index" 
                  @tap="goToUserProfile(user.id)"
                >
                  <!-- 用户卡片内容 -->
                  <image :src="user.coverImage" :alt="user.username" class="recommended-cover" mode="aspectFill"></image>
                  <view class="recommended-gradient"></view>
                  <view class="recommended-avatar-container">
                    <image :src="user.avatar" :alt="user.username" class="recommended-avatar" mode="aspectFill"></image>
                    <view class="vip-badge" v-if="user.isVip">
                      <text class="tn-icon-star"></text>
                    </view>
                  </view>
                  <view class="user-online-dot" v-if="user.isOnline"></view>
                  <view class="recommended-info">
                    <!-- 用户信息内容 -->
                    <view class="recommended-name">
                      <text :class="{'vip-name': user.isVip}">{{ user.username }}</text>
                      <text class="verified-small" v-if="user.isVerified">
                        <text class="tn-icon-check"></text>
                      </text>
                    </view>
                    <view class="recommended-location">
                      <text class="tn-icon-location"></text>
                      <text v-if="user.distance <= 5">{{ user.distance }}km</text>
                      <text v-else>{{ user.location }}</text>
                    </view>
                    <view class="recommended-interests" v-if="user.interests && user.interests.length > 0">
                      <view 
                        class="recommended-interest" 
                        v-for="(interest, i) in user.interests.slice(0, 2)" 
                        :key="i"
                      >
                        {{ interest }}
                      </view>
                    </view>
                    <view class="recommended-action-btns">
                      <button class="recommended-like-btn" @tap.stop="likeUser(user.id)">
                        <text class="tn-icon-like"></text>
                      </button>
                      <button class="recommended-follow" @tap.stop="goToChat(user.id)">
                        <text class="tn-icon-message"></text>
                        <text>私聊</text>
                      </button>
                    </view>
                  </view>
                </view>
              </template>
            </scroll-view>
          </view>

          <!-- 用户列表 -->
          <view class="user-grid">
            <template v-if="users.length === 0 && isLoading">
              <!-- 初始加载骨架屏 -->
              <view class="user-card skeleton" v-for="i in 6" :key="i">
                <view class="skeleton-inner">
                  <view class="skeleton-cover"></view>
                  <view class="skeleton-avatar"></view>
                  <view class="skeleton-content">
                    <view class="skeleton-title"></view>
                    <view class="skeleton-info"></view>
                    <view class="skeleton-tags"></view>
                    <view class="skeleton-action"></view>
                  </view>
                </view>
              </view>
            </template>
            
            <!-- 空状态 -->
            <template v-else-if="users.length > 0 && filteredUsers.length === 0">
              <view class="empty-state">
                <view class="empty-icon">
                  <text class="tn-icon-discovery"></text>
                </view>
                <view class="empty-text">暂无符合条件的用户</view>
                <view class="empty-tips">尝试调整筛选条件或稍后再来</view>
                <button class="empty-action" @tap="resetFilter">
                  <text class="tn-icon-refresh"></text>
                  <text>重置筛选</text>
                </button>
              </view>
            </template>
            
            <template v-else>
              <!-- 已加载的用户列表 -->
              <view 
                class="user-card" 
                v-for="(user, index) in filteredUsers" 
                :key="user.id" 
                @tap="goToUserProfile(user.id)"
              >
                <view class="user-card-inner">
                  <image :src="user.coverImage" :alt="user.username" class="user-cover" mode="aspectFill"></image>
                  <view class="user-gradient"></view>
                  <view class="user-avatar-container">
                    <image :src="user.avatar" :alt="user.username" class="user-avatar" mode="aspectFill"></image>
                    <view class="vip-badge" v-if="user.isVip">
                      <text class="tn-icon-star"></text>
                    </view>
                  </view>
                  <view class="user-info">
                    <view class="user-name">
                      <text :class="{'vip-name': user.isVip}">{{ user.username }}</text>
                      <text class="verified-badge" v-if="user.isVerified">
                        <text class="tn-icon-check"></text>
                      </text>
                    </view>
                    <view class="user-meta">
                      <view :class="['gender-age', user.gender === 'male' ? 'gender-male' : 'gender-female']">
                        {{ user.gender === 'male' ? '♂' : '♀' }} {{ user.age }}
                      </view>
                      <view class="location">
                        <text class="tn-icon-location"></text>
                        <text v-if="user.distance <= 5">{{ user.distance }}km</text>
                        <text v-else>{{ user.location }}</text>
                      </view>
                    </view>
                    <view class="user-bio">{{ user.bio }}</view>
                    <view class="user-interests" v-if="user.interests && user.interests.length > 0">
                      <view 
                        class="user-interest" 
                        v-for="(interest, i) in user.interests" 
                        :key="i"
                      >
                        {{ interest }}
                      </view>
                    </view>
                    <view class="user-action-btns">
                      <button 
                        class="user-like-btn" 
                        @tap.stop="likeUser(user.id)" 
                        :class="{'is-liked': likedUsers.has(user.id)}"
                      >
                        <text class="tn-icon-like"></text>
                      </button>
                      <button class="user-action" @tap.stop="goToChat(user.id)">
                        <text class="tn-icon-message"></text>
                        <text>私聊</text>
                      </button>
                    </view>
                  </view>
                  
                  <view class="user-online-indicator" v-if="user.isOnline"></view>
                  <view class="user-level" v-if="user.level">
                    <text class="level-text">LV.{{ user.level }}</text>
                  </view>
                  <view class="user-tags" v-if="user.tags && user.tags.length > 0">
                    <view class="user-tag" v-for="(tag, idx) in user.tags.slice(0, 2)" :key="idx">
                      {{ tag }}
                    </view>
                  </view>
                </view>
              </view>
              
              <!-- 加载更多时的骨架屏 -->
              <view class="user-card skeleton" v-if="isLoadingMore" v-for="i in 2" :key="i">
                <view class="skeleton-inner">
                  <view class="skeleton-cover"></view>
                  <view class="skeleton-avatar"></view>
                  <view class="skeleton-content">
                    <view class="skeleton-title"></view>
                    <view class="skeleton-info"></view>
                    <view class="skeleton-tags"></view>
                    <view class="skeleton-action"></view>
                  </view>
                </view>
              </view>
            </template>
          </view>
        </view>
      </z-paging>
      
      <!-- 筛选弹窗 -->
      <filter-popup 
        v-model="isFilterModalOpen" 
        :filter-options="filterOptions"
        :interests="interests"
        @apply="handleFilterApply"
        @reset="resetFilter"
        @close="closeFilter"
      ></filter-popup>
      
      <!-- 自定义回到顶部按钮 -->
      <view 
        class="back-to-top-button" 
        v-if="showBackToTop"
        @tap="scrollToTop"
        :class="{'active': showBackToTop, 'clicking': isScrollingToTop}"
      >
        <view class="rocket-icon">
          <view class="rocket-body"></view>
          <view class="window"></view>
          <view class="fin fin-left"></view>
          <view class="fin fin-right"></view>
          <view class="exhaust-flame"></view>
        </view>
        <view class="flight-path" v-if="isScrollingToTop">
          <view class="particle" v-for="i in 5" :key="i"></view>
        </view>
      </view>
      
      <!-- 添加滚动特效元素 -->
      <view class="scroll-effect" v-if="isScrollingToTop">
        <view class="star" v-for="i in 10" :key="i"></view>
      </view>
    </view>
  </layout>
</template>

<script>
import Layout from '@/components/layout/layout.vue';
import FilterPopup from '@/components/common/FilterPopup.vue';

export default {
  components: {
    Layout,
    FilterPopup
  },
  data() {
    return {
      // 页面状态管理
      activeFilter: 'all',
      showFilterDrawer: false,
      isFilterModalOpen: false,
      
      // 骨架屏相关
      isLoading: false,
      isLoadingMore: false,
      isLoadingRecommendations: true,
      
      // 筛选相关数据 - 确保初始化默认值
      filterOptions: {
        // 基础筛选
        ageRange: [18, 50],
        gender: 'all', // 'all', 'male', 'female'
        distance: 50, // 单位: km
        
        // 高级筛选
        onlineOnly: false,
        verifiedOnly: false,
        withInterestsOnly: false,
        vipOnly: false,
        selectedInterests: [],
      },
      
      // 用户列表数据
      users: [],
      recommendedUsers: [],
      
      // 用于筛选的兴趣标签列表
      interests: ['游戏', '电影', '旅行', '美食', '摄影', '运动', '音乐', '阅读', '动漫', '宠物', '健身', '编程'],
      
      // 点赞状态
      likedUsers: new Set(),
      
      // 分页控制
      pageSize: 20,
      currentPage: 1,
      hasMore: true,
      
      // 滚动相关
      scrollTop: 0,
      scrollThreshold: 300,
      showBackToTop: false,
      isScrollingToTop: false,  // 新增：是否正在滚动到顶部
    }
  },
  onLoad() {
    this.loadRecommendations();
  },
  onReady() {
    if (this.users.length === 0) {
      this.$refs.paging.reload();
    }
  },
  computed: {
    filteredUsers() {
      if (!this.users || this.users.length === 0) {
        return [];
      }
      
      // 应用活跃的筛选条件
      if (this.activeFilter === 'all') {
        return this.users;
      }
      
      // 根据不同筛选条件返回不同结果
      switch (this.activeFilter) {
        case 'nearby':
          return this.users.filter(user => user.distance <= 10);
        case 'girls':
          return this.users.filter(user => user.gender === 'female');
        case 'boys':
          return this.users.filter(user => user.gender === 'male');
        case 'tagged':
          return this.users.filter(user => user.interests && user.interests.length > 0);
        case 'verified':
          return this.users.filter(user => user.isVerified);
        case 'vip':
          return this.users.filter(user => user.isVip);
        case 'online':
          return this.users.filter(user => user.isOnline);
        default:
          return this.users;
      }
    }
  },
  methods: {
    // 分页查询 - 修改为不直接操作filteredUsers
    queryList(pageNo, pageSize) {
      // 设置加载状态
      if (pageNo === 1) {
        this.isLoading = true;
        this.isLoadingMore = false;
      } else {
        this.isLoadingMore = true;
        this.isLoading = false;
      }
      
      // 模拟数据加载
      setTimeout(() => {
        const newUsers = this.generateRandomUsers(pageSize);
        
        // 直接传给z-paging，让它更新users数组
        // filteredUsers会因为计算属性自动更新
        const hasMore = pageNo < 5;
        this.$refs.paging.complete(newUsers, hasMore);
        
        // 加载完成后更新状态
        this.isLoading = false;
        this.isLoadingMore = false;
      }, 800);
    },
    
    // 加载推荐用户
    loadRecommendations() {
      this.isLoadingRecommendations = true;
      
      setTimeout(() => {
        this.recommendedUsers = this.generateRandomUsers(6);
        this.isLoadingRecommendations = false;
      }, 800);
    },
    
    // 生成随机用户（模拟数据）
    generateRandomUsers(count) {
      const randomUsers = [];
      const locations = ['北京', '上海', '深圳', '广州', '杭州', '成都', '南京', '武汉'];
      const interests = ['游戏', '电影', '旅行', '美食', '摄影', '运动', '音乐', '阅读', '动漫', '宠物', '健身', '编程'];
      const tags = ['社恐', '熬夜党', '吃货', '旅行达人', '王者荣耀', '和平精英', '吃鸡', 'LOL', '悄悄话', '电竞'];
      
      for (let i = 0; i < count; i++) {
        const gender = Math.random() > 0.5 ? 'male' : 'female';
        const randomInterests = [...interests].sort(() => 0.5 - Math.random()).slice(0, Math.floor(Math.random() * 4) + 1);
        const randomTags = [...tags].sort(() => 0.5 - Math.random()).slice(0, Math.floor(Math.random() * 3));
        
        randomUsers.push({
          id: Math.floor(Math.random() * 10000) + 1,
          username: `用户${Math.floor(Math.random() * 1000)}`,
          gender: gender,
          age: Math.floor(Math.random() * 20) + 18,
          avatar: `https://picsum.photos/seed/user${Math.floor(Math.random() * 1000)}/100`,
          coverImage: `https://picsum.photos/seed/cover${Math.floor(Math.random() * 1000)}/300/500`,
          isVerified: Math.random() > 0.7,
          isVip: Math.random() > 0.8,
          isOnline: Math.random() > 0.5,
          location: locations[Math.floor(Math.random() * locations.length)],
          distance: Math.floor(Math.random() * 50) + 1,
          bio: '这是一个简短的个人介绍，描述自己的兴趣爱好和个性特点。',
          interests: randomInterests,
          level: Math.floor(Math.random() * 30) + 1,
          tags: randomTags
        });
      }
      
      return randomUsers;
    },
    
    // 筛选相关方法
    setFilter(filter) {
      if (this.activeFilter === filter) return;
      
      // 由于使用了计算属性，不需要主动更新filteredUsers
      this.activeFilter = filter;
      
      // 切换筛选标签时显示加载状态，但不影响已加载的数据
      this.isLoading = false;
      this.isLoadingMore = true;
      
      setTimeout(() => {
        // 不再需要手动更新filteredUsers
        this.isLoadingMore = false;
      }, 300);
    },
    
    resetFilter() {
      try {
        this.activeFilter = 'all';
        this.filterOptions = {
          ageRange: [18, 50],
          gender: 'all',
          distance: 50,
          onlineOnly: false,
          verifiedOnly: false,
          withInterestsOnly: false,
          vipOnly: false,
          selectedInterests: []
        };
        
        if (this.$refs.paging) {
          this.$refs.paging.reload();
        }
      } catch (error) {
        console.error('重置筛选选项时出错:', error);
        // 确保页面不崩溃
        uni.showToast({
          title: '重置失败，请稍后再试',
          icon: 'none'
        });
      }
    },
    
    showFilter() {
      this.isFilterModalOpen = true;
    },
    
    closeFilter() {
      this.isFilterModalOpen = false;
    },
    
    // 处理应用筛选
    handleFilterApply(options) {
      // 验证接收到的options对象，防止设置null
      if (!options) {
        console.error('筛选选项为空');
        uni.showToast({
          title: '筛选选项无效',
          icon: 'none'
        });
        return;
      }
      
      // 确保所有必需的属性都存在
      if (!options.selectedInterests) {
        options.selectedInterests = [];
      }
      
      // 确保布尔值属性存在
      options.onlineOnly = !!options.onlineOnly;
      options.verifiedOnly = !!options.verifiedOnly;
      options.vipOnly = !!options.vipOnly;
      options.withInterestsOnly = !!options.withInterestsOnly;
      
      // 设置筛选选项
      this.filterOptions = options;
      
      // 应用筛选时，显示第一页的骨架屏
      this.isLoading = true;
      this.isLoadingMore = false;
      
      this.$refs.paging.reload();
    },
    
    // 刷新推荐用户
    refreshRecommendations() {
      this.loadRecommendations();
    },
    
    // 交互方法
    likeUser(userId) {
      if (this.likedUsers.has(userId)) {
        this.likedUsers.delete(userId);
      } else {
        this.likedUsers.add(userId);
        
        uni.showToast({
          title: '已喜欢',
          icon: 'none',
          duration: 1500
        });
      }
    },
    
    goToUserProfile(userId) {
      uni.navigateTo({
        url: `/pages/mine/user-profile?id=${userId}`
      });
    },
    
    goToChat(userId) {
      uni.navigateTo({
        url: `/pages/friends/chat?id=${userId}`
      });
    },
    
    // 滚动相关方法
    handleScroll(e) {
      // 更新滚动位置并决定是否显示回到顶部按钮
      // z-paging可能将滚动位置包含在e.detail中
      const scrollTop = e.scrollTop || (e.detail && e.detail.scrollTop) || 0;
      this.scrollTop = scrollTop;
      
      // 根据滚动距离控制置顶按钮显示/隐藏
      if (scrollTop > this.scrollThreshold && !this.showBackToTop) {
        this.showBackToTop = true;
      } else if (scrollTop <= this.scrollThreshold && this.showBackToTop) {
        this.showBackToTop = false;
      }
    },
    
    handleScrollToLower() {
      // 下拉加载更多事件，不需要做其他处理，z-paging会自动触发queryList
      console.log('加载更多...');
    },
    
    handleScrollToUpper() {
      this.scrollTop = 0;
      this.showBackToTop = false;
      this.isScrollingToTop = false;
    },
    
    scrollToTop() {
      if (this.isScrollingToTop) return;
      
      // 设置正在滚动状态，触发动画效果
      this.isScrollingToTop = true;
      
      // 延迟执行滚动操作，让火箭动画有时间展示
      setTimeout(() => {
        // 使用z-paging自带的scrollToTop方法，带动画效果
        this.$refs.paging.scrollToTop(true);
        
        // 设置动画效果完成后的状态重置
        setTimeout(() => {
          this.isScrollingToTop = false;
          this.showBackToTop = false;
        }, 500);
      }, 800); // 延迟800毫秒，让火箭动画有足够时间显示
    },
    
    onRefresh() {
      this.currentPage = 1;
      this.hasMore = true;
      
      // 确保在刷新时设置正确的加载状态
      this.isLoading = true;
      this.isLoadingMore = false;
      
      this.loadRecommendations();
      
      this.$refs.paging.reload();
    },
    
    // 添加处理空视图重新加载的方法
    handleEmptyViewReload() {
      this.$refs.paging.reload();
    }
  }
}
</script>

<style lang="scss" scoped>
.friends-page {
  position: relative;
  background-color: #020303;
  display: flex;
  flex-direction: column;
  
  /* 添加图标公共样式 */
  .icon-text {
    font-size: 40rpx;
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 调整z-paging样式 */
  .friends-paging {
    width: 100%;
    flex: 1;
  }
  
  /* content-wrapper样式 */
  .content-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }
  
  /* 添加悬浮筛选标签样式 - 在z-paging内部 */
  .sticky-filter-tabs {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #020303;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.5);
    
    .filter-tabs {
      white-space: nowrap;
      padding: 0 30rpx;
      
      .filter-tab {
        display: inline-block;
        padding: 16rpx 32rpx;
        margin: 0 12rpx;
        font-size: 28rpx;
        color: #888;
        background-color: #111111;
        border-radius: 36rpx;
        transition: all 0.3s;
        position: relative;
        font-weight: 500;
        
        &:first-child {
          margin-left: 0;
        }
        
        &:last-child {
          margin-right: 0;
        }
        
        &.active {
          color: #050505;
          background-color: #B3F73C;
          font-weight: 600;
        }
      }
    }
  }

  /* 自定义导航栏 */
  .custom-nav {
    width: 100%;
    padding: 0 30rpx;
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .header-left, .header-right {
      display: flex;
      align-items: center;
      min-width: 72rpx;
      height: 72rpx;
      position: relative;
    }
    
    .header-title {
      font-size: 36rpx;
      font-weight: 700;
      color: #e0e0e0;
      position: relative;
      text-align: center;
      
      &::after {
        content: '';
        position: absolute;
        bottom: -10rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        background: linear-gradient(90deg, #8eac21, #B3F73C);
        border-radius: 2rpx;
      }
    }
    
    .icon-btn {
      width: 72rpx;
      height: 72rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #B3F73C;
      background-color: #0f0f0f;
      border-radius: 50%;
      box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.2);
      z-index: 1;
      text-align: center;
      
      &:active {
        transform: scale(0.95);
        background-color: rgba(179, 247, 60, 0.1);
      }
    }
    
    .placeholder-btn {
      width: 72rpx;
      height: 72rpx;
      opacity: 0;
    }
  }
  
  /* 推荐板块样式 - 调整外边距 */
  .recommendation-section {
    padding: 0 30rpx;
    margin-bottom: 40rpx;
    
    .section-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .title-text {
        font-size: 32rpx;
        font-weight: 600;
        color: #e0e0e0;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          left: 0;
          bottom: -8rpx;
          width: 40rpx;
          height: 6rpx;
          background-color: #B3F73C;
          border-radius: 3rpx;
        }
      }
      
      .refresh-btn {
        display: flex;
        align-items: center;
        color: #B3F73C;
        font-size: 26rpx;
        
        .tn-icon-refresh {
          margin-right: 8rpx;
        }
      }
    }
    
    .recommended-users {
      overflow: hidden;
      white-space: nowrap;
      padding: 10rpx 0 30rpx;
      
      .recommended-user {
        display: inline-block;
        margin-right: 24rpx;
        position: relative;
        width: 300rpx;
        height: 450rpx;
        border-radius: 24rpx;
        overflow: hidden;
        box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
        animation: fadeInRight 0.5s ease forwards;
        opacity: 0;
        transform: translateX(20rpx);
        border: 2rpx solid rgba(179, 247, 60, 0.1);
        transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
        
        &:last-child {
          margin-right: 0;
        }
        
        &:active {
          transform: scale(0.97);
          box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
          border-color: rgba(179, 247, 60, 0.3);
        }
        
        .recommended-cover {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.5s;
        }
        
        &:hover .recommended-cover {
          transform: scale(1.05);
        }
        
        .recommended-gradient {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(to bottom, 
            rgba(0,0,0,0.2) 0%, 
            rgba(0,0,0,0.4) 30%,
            rgba(0,0,0,0.7) 70%, 
            rgba(0,0,0,0.9) 100%);
          pointer-events: none;
        }
        
        .recommended-avatar-container {
          position: absolute;
          top: 20rpx;
          left: 20rpx;
          z-index: 2;
          
          .recommended-avatar {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            border: 3rpx solid rgba(179, 247, 60, 0.8);
            object-fit: cover;
            box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease;
          }
          
          &:active .recommended-avatar {
            transform: scale(1.1);
          }
          
          .vip-badge {
            position: absolute;
            bottom: -5rpx;
            right: -5rpx;
            width: 30rpx;
            height: 30rpx;
            border-radius: 50%;
            background: linear-gradient(135deg, #8eac21, #B3F73C);
            color: #050505;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16rpx;
            border: 2rpx solid #050505;
            box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.3);
          }
        }
        
        .user-online-dot {
          position: absolute;
          top: 20rpx;
          right: 20rpx;
          width: 16rpx;
          height: 16rpx;
          border-radius: 50%;
          background-color: #B3F73C;
          border: 2rpx solid #050505;
          box-shadow: 0 0 10rpx rgba(179, 247, 60, 0.5);
          animation: pulse 1.5s infinite;
          z-index: 2;
        }
        
        .recommended-info {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 20rpx;
          z-index: 2;
          
          .recommended-name {
            display: flex;
            align-items: center;
            font-size: 28rpx;
            font-weight: 600;
            color: #ffffff;
            margin-bottom: 8rpx;
            
            .vip-name {
              background: linear-gradient(90deg, #8eac21, #B3F73C);
              -webkit-background-clip: text;
              color: transparent;
              position: relative;
              font-weight: 700;
              text-shadow: 0 0 5px rgba(179, 247, 60, 0.3);
            }
            
            .verified-small {
              color: #B3F73C;
              font-size: 22rpx;
              margin-left: 8rpx;
            }
          }
          
          .recommended-location {
            display: flex;
            align-items: center;
            font-size: 22rpx;
            color: #aaa;
            margin-bottom: 12rpx;
            
            .tn-icon-location {
              margin-right: 6rpx;
              color: #B3F73C;
            }
          }
          
          .recommended-interests {
            display: flex;
            gap: 8rpx;
            margin-bottom: 16rpx;
            flex-wrap: wrap;
            
            .recommended-interest {
              font-size: 20rpx;
              color: #aaa;
              padding: 2rpx 12rpx;
              border-radius: 16rpx;
              background-color: rgba(179, 247, 60, 0.08);
              white-space: nowrap;
              border: 1rpx solid rgba(179, 247, 60, 0.2);
            }
          }
          
          .recommended-action-btns {
            display: flex;
            gap: 8rpx;
            align-items: center;
            
            .recommended-like-btn {
              width: 60rpx;
              height: 60rpx;
              background-color: rgba(5, 5, 5, 0.7);
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              border: 2rpx solid rgba(179, 247, 60, 0.5);
              color: #B3F73C;
              font-size: 28rpx;
              padding: 0;
              margin: 0;
              flex-shrink: 0;
              transition: all 0.2s;
              
              &:active {
                background-color: rgba(179, 247, 60, 0.2);
                transform: scale(0.95);
              }
            }
            
            .recommended-follow {
              background-color: rgba(5, 5, 5, 0.7);
              color: #e0e0e0;
              padding: 10rpx 0;
              border-radius: 30rpx;
              flex: 1;
              text-align: center;
              font-size: 24rpx;
              font-weight: 600;
              border: 2rpx solid rgba(179, 247, 60, 0.5);
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 6rpx;
              line-height: 1;
              transition: all 0.2s;
              
              .tn-icon-message {
                color: #B3F73C;
              }
              
              &:active {
                background-color: rgba(179, 247, 60, 0.8);
                border-color: rgba(179, 247, 60, 0.8);
                color: #050505;
                transform: scale(0.95);
                
                .tn-icon-message {
                  color: #050505;
                }
              }
            }
          }
        }
      }
    }
  }
  
  /* 用户卡片样式 - 调整上边距 */
  .user-grid {
    padding: 10rpx 30rpx 120rpx; /* 减少顶部内边距 */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30rpx;
    
    .user-card {
      background-color: #050505;
      border-radius: 24rpx;
      overflow: hidden;
      transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
      position: relative;
      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
      animation: fadeInUp 0.5s ease forwards;
      opacity: 0;
      transform: translateY(20rpx);
      border: 2rpx solid rgba(179, 247, 60, 0.05);
      
      &:active {
        transform: scale(0.97);
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
        border-color: rgba(179, 247, 60, 0.2);
      }
      
      .user-card-inner {
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        
        .user-cover {
          height: 300rpx;
          width: 100%;
          object-fit: cover;
          position: relative;
          transition: transform 0.5s;
        }
        
        &:hover .user-cover {
          transform: scale(1.05);
        }
        
        .user-gradient {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 300rpx;
          background: linear-gradient(to bottom, 
            rgba(0,0,0,0.2) 0%, 
            rgba(0,0,0,0.5) 50%, 
            rgba(0,0,0,0.8) 100%);
          pointer-events: none;
        }
        
        .user-avatar-container {
          position: absolute;
          top: 240rpx;
          right: 30rpx;
          border-radius: 50%;
          padding: 4rpx;
          background: #050505;
          box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
          z-index: 1;
          
          .user-avatar {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            border: 2rpx solid rgba(179, 247, 60, 0.3);
            object-fit: cover;
            transition: transform 0.3s;
          }
          
          &:hover .user-avatar {
            transform: scale(1.03);
          }
          
          .vip-badge {
            position: absolute;
            bottom: 0;
            right: 0;
            background: linear-gradient(135deg, #8eac21, #B3F73C);
            color: #050505;
            width: 36rpx;
            height: 36rpx;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2rpx solid #050505;
            font-size: 20rpx;
            box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.3);
          }
        }
        
        .user-info {
          padding: 30rpx;
          flex: 1;
          display: flex;
          flex-direction: column;
          
          .user-name {
            font-size: 32rpx;
            font-weight: 600;
            margin-bottom: 10rpx;
            display: flex;
            align-items: center;
            gap: 10rpx;
            
            .vip-name {
              background: linear-gradient(90deg, #8eac21, #B3F73C);
              -webkit-background-clip: text;
              color: transparent;
              position: relative;
              display: inline-block;
              font-weight: 700;
              text-shadow: 0 0 5px rgba(179, 247, 60, 0.3);
            }
            
            .verified-badge {
              color: #B3F73C;
              font-size: 28rpx;
            }
          }
          
          .user-meta {
            display: flex;
            justify-content: flex-start;
            font-size: 26rpx;
            color: #aaa;
            gap: 20rpx;
            margin-bottom: 16rpx;
            
            .gender-age {
              display: flex;
              align-items: center;
              gap: 6rpx;
              background-color: rgba(255, 255, 255, 0.05);
              padding: 4rpx 12rpx;
              border-radius: 20rpx;
            }
            
            .gender-female {
              color: #ff7675;
            }
            
            .gender-male {
              color: #74b9ff;
            }
            
            .location {
              display: flex;
              align-items: center;
              gap: 6rpx;
              background-color: rgba(179, 247, 60, 0.05);
              padding: 4rpx 12rpx;
              border-radius: 20rpx;
              
              .tn-icon-location {
                color: #B3F73C;
              }
            }
          }
          
          .user-bio {
            font-size: 26rpx;
            color: #bbb;
            margin-bottom: 20rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            min-height: 72rpx;
            line-height: 1.4;
            position: relative;
            
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              right: 0;
              width: 40rpx;
              height: 24rpx;
              background: linear-gradient(to right, rgba(5, 5, 5, 0), #050505);
            }
          }
          
          .user-interests {
            display: flex;
            flex-wrap: wrap;
            gap: 12rpx;
            justify-content: flex-start;
            margin-bottom: 16rpx;
            flex: 1;
            
            .user-interest {
              font-size: 22rpx;
              color: #aaa;
              padding: 4rpx 16rpx;
              border-radius: 20rpx;
              background-color: rgba(179, 247, 60, 0.08);
              white-space: nowrap;
              border: 1rpx solid rgba(179, 247, 60, 0.2);
              transition: all 0.2s;
              
              &:hover {
                background-color: rgba(179, 247, 60, 0.2);
                color: #B3F73C;
                border-color: rgba(179, 247, 60, 0.3);
              }
            }
          }
          
          .user-action-btns {
            display: flex;
            gap: 12rpx;
            align-items: center;
            
            .user-like-btn {
              width: 80rpx;
              height: 80rpx;
              background-color: #070707;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              border: 2rpx solid rgba(179, 247, 60, 0.5);
              color: #B3F73C;
              font-size: 32rpx;
              flex-shrink: 0;
              transition: all 0.2s;
              
              &:active {
                background-color: rgba(179, 247, 60, 0.2);
                transform: scale(0.95);
              }
              
              &.is-liked {
                background-color: rgba(179, 247, 60, 0.3);
                color: #B3F73C;
                border-color: rgba(179, 247, 60, 0.8);
                animation: likeAnimation 0.5s ease;
              }
              
              @keyframes likeAnimation {
                0% {
                  transform: scale(1);
                }
                50% {
                  transform: scale(1.2);
                }
                100% {
                  transform: scale(1);
                }
              }
            }
            
            .user-action {
              background-color: #070707;
              color: #e0e0e0;
              padding: 14rpx 0;
              border-radius: 36rpx;
              flex: 1;
              text-align: center;
              font-size: 28rpx;
              font-weight: 600;
              border: 2rpx solid rgba(179, 247, 60, 0.5);
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 10rpx;
              line-height: 1;
              transition: all 0.2s;
              position: relative;
              overflow: hidden;
              
              &::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(179, 247, 60, 0.2), transparent);
                transition: left 0.5s;
              }
              
              &:hover::before {
                left: 100%;
              }
              
              .tn-icon-message {
                color: #B3F73C;
              }
              
              &:active {
                background-color: rgba(179, 247, 60, 0.8);
                border-color: rgba(179, 247, 60, 0.8);
                color: #050505;
                transform: scale(0.98);
                
                .tn-icon-message {
                  color: #050505;
                }
              }
            }
          }
        }
      }
      
      .user-online-indicator {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        width: 16rpx;
        height: 16rpx;
        background-color: #B3F73C;
        border-radius: 50%;
        border: 3rpx solid #020303;
        box-shadow: 0 0 10rpx rgba(179, 247, 60, 0.5);
        z-index: 2;
        animation: pulse 1.5s infinite;
      }
      
      .user-level {
        position: absolute;
        top: 20rpx;
        left: 20rpx;
        background: linear-gradient(90deg, rgba(179, 247, 60, 0.8), rgba(142, 172, 33, 0.8));
        border-radius: 20rpx;
        padding: 4rpx 12rpx;
        font-size: 22rpx;
        color: #050505;
        font-weight: 600;
        z-index: 2;
        box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.3);
      }
      
      .user-tags {
        position: absolute;
        top: 60rpx;
        left: 20rpx;
        display: flex;
        flex-direction: column;
        gap: 10rpx;
        z-index: 2;
        
        .user-tag {
          background-color: rgba(5, 5, 5, 0.6);
          border: 1rpx solid rgba(179, 247, 60, 0.3);
          border-radius: 16rpx;
          padding: 4rpx 12rpx;
          font-size: 22rpx;
          color: #B3F73C;
        }
      }
    }
  }
  
  /* 确保筛选选项在小屏幕上正常显示 */
  @media screen and (max-width: 375px) {
    .filter-tabs {
      .filter-tab {
        padding: 12rpx 24rpx;
        margin: 0 6rpx;
        font-size: 24rpx;
      }
    }
    
    .user-grid {
      gap: 20rpx;
      padding: 20rpx 20rpx 100rpx;
    }
  }
  
  /* 页面过渡动画 */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20rpx);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes fadeInRight {
    from {
      opacity: 0;
      transform: translateX(30rpx);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(179, 247, 60, 0.5);
    }
    70% {
      box-shadow: 0 0 0 10rpx rgba(179, 247, 60, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(179, 247, 60, 0);
    }
  }

  /* 用户卡片骨架屏样式 */
  .user-card.skeleton {
    background-color: #070707;
    animation: none;
    opacity: 1;
    transform: none;
    box-shadow: none;
    
    /* 为加载更多骨架屏添加过渡动画 */
    &[key^='loading-more'] {
      animation: fadeInUp 0.5s ease forwards;
      margin-top: 20rpx;
    }
    
    .skeleton-inner {
      padding: 0;
      height: 100%;
      
      .skeleton-cover {
        height: 300rpx;
        width: 100%;
        background: linear-gradient(110deg, #0a0a0a 20%, #111111 30%, #0a0a0a 40%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite linear;
        border-radius: 24rpx 24rpx 0 0;
      }
      
      .skeleton-avatar {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        position: absolute;
        top: 240rpx;
        right: 30rpx;
        background: linear-gradient(110deg, #0a0a0a 20%, #111111 30%, #0a0a0a 40%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite linear;
        z-index: 1;
      }
      
      .skeleton-content {
        padding: 30rpx;
        
        .skeleton-title {
          height: 40rpx;
          width: 180rpx;
          margin-bottom: 20rpx;
          background: linear-gradient(110deg, #0a0a0a 20%, #111111 30%, #0a0a0a 40%);
          background-size: 200% 100%;
          animation: shimmer 1.5s infinite linear;
          border-radius: 8rpx;
        }
        
        .skeleton-info {
          height: 30rpx;
          width: 240rpx;
          margin-bottom: 20rpx;
          background: linear-gradient(110deg, #0a0a0a 20%, #111111 30%, #0a0a0a 40%);
          background-size: 200% 100%;
          animation: shimmer 1.5s infinite linear;
          border-radius: 8rpx;
        }
        
        .skeleton-tags {
          display: flex;
          gap: 10rpx;
          margin-bottom: 20rpx;
          
          &::before, &::after {
            content: '';
            height: 30rpx;
            border-radius: 15rpx;
            background: linear-gradient(110deg, #0a0a0a 20%, #111111 30%, #0a0a0a 40%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite linear;
          }
          
          &::before {
            width: 100rpx;
          }
          
          &::after {
            width: 80rpx;
          }
        }
        
        .skeleton-action {
          height: 80rpx;
          border-radius: 40rpx;
          background: linear-gradient(110deg, #0a0a0a 20%, #111111 30%, #0a0a0a 40%);
          background-size: 200% 100%;
          animation: shimmer 1.5s infinite linear;
          margin-top: 40rpx;
        }
      }
    }
  }

  /* 骨架屏动画 */
  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
  
  /* 推荐用户骨架屏 */
  .skeleton-user {
    display: inline-block;
    width: 300rpx;
    height: 450rpx;
    margin-right: 24rpx;
    background: linear-gradient(110deg, #0a0a0a 20%, #111111 30%, #0a0a0a 40%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 24rpx;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 20rpx;
      left: 20rpx;
      width: 80%;
      height: 120rpx;
      background: linear-gradient(110deg, rgba(10, 10, 10, 0.7) 20%, rgba(17, 17, 17, 0.7) 30%, rgba(10, 10, 10, 0.7) 40%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite linear;
      border-radius: 16rpx;
    }
  }
  
  /* 空状态样式 */
  .empty-recommendations {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300rpx;
    width: 100%;
    color: #777;
    font-size: 28rpx;
    
    .tn-icon-info {
      font-size: 64rpx;
      margin-bottom: 20rpx;
      color: #B3F73C;
      opacity: 0.5;
    }
  }
  
  .empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80rpx 0;
    
    .empty-icon {
      font-size: 120rpx;
      color: #B3F73C;
      opacity: 0.3;
      margin-bottom: 30rpx;
    }
    
    .empty-text {
      font-size: 32rpx;
      font-weight: 600;
      color: #e0e0e0;
      margin-bottom: 16rpx;
    }
    
    .empty-tips {
      font-size: 28rpx;
      color: #777;
      margin-bottom: 40rpx;
      text-align: center;
    }
    
    .empty-action {
      background-color: #070707;
      color: #B3F73C;
      font-size: 28rpx;
      font-weight: 600;
      padding: 20rpx 40rpx;
      border-radius: 40rpx;
      border: 2rpx solid rgba(179, 247, 60, 0.5);
      display: flex;
      align-items: center;
      gap: 10rpx;
      
      &:active {
        background-color: rgba(179, 247, 60, 0.2);
        transform: scale(0.97);
      }
    }
  }

  /* 自定义滚动置顶按钮 */
  .back-to-top-button {
    position: fixed;
    right: 30rpx;
    bottom: 200rpx;
    width: 100rpx;
    height: 100rpx;
    background: linear-gradient(135deg, #8eac21, #B3F73C);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8rpx 24rpx rgba(179, 247, 60, 0.25), 0 0 30rpx rgba(179, 247, 60, 0.2);
    z-index: 99;
    animation: float 2s infinite ease-in-out;
    transform-origin: center;
    opacity: 0;
    transform: scale(0) translateY(20rpx);
    transition: opacity 0.3s, transform 0.3s;
    
    &.active {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
    
    &.clicking {
      animation: rocket-launch 0.5s forwards;
    }
    
    &:active {
      transform: scale(0.9);
      transition: transform 0.2s;
    }
    
    .rocket-icon {
      position: relative;
      width: 40rpx;
      height: 60rpx;
      
      .rocket-body {
        position: absolute;
        top: 0;
        left: 5rpx;
        width: 30rpx;
        height: 45rpx;
        background-color: #050505;
        border-radius: 50% 50% 20% 20%;
      }
      
      .window {
        position: absolute;
        top: 10rpx;
        left: 15rpx;
        width: 10rpx;
        height: 10rpx;
        background-color: #ffffff;
        border-radius: 50%;
        box-shadow: 0 0 5rpx #b3f73c;
      }
      
      .fin {
        position: absolute;
        width: 15rpx;
        height: 15rpx;
        background-color: #050505;
      }
      
      .fin-left {
        top: 25rpx;
        left: -3rpx;
        transform: skew(30deg, 0);
        border-radius: 0 0 0 10rpx;
      }
      
      .fin-right {
        top: 25rpx;
        right: -3rpx;
        transform: skew(-30deg, 0);
        border-radius: 0 0 10rpx 0;
      }
      
      .exhaust-flame {
        position: absolute;
        bottom: -15rpx;
        left: 12rpx;
        width: 16rpx;
        height: 25rpx;
        background: linear-gradient(to bottom, #ff9500, transparent);
        border-radius: 50% 50% 20% 20%;
        animation: flame 0.5s infinite alternate;
      }
    }
    
    .flight-path {
      position: absolute;
      width: 40rpx;
      height: 80rpx;
      bottom: -10rpx;
      z-index: -1;
      
      .particle {
        position: absolute;
        width: 8rpx;
        height: 8rpx;
        border-radius: 50%;
        background: #ff9500;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        
        &:nth-child(1) {
          bottom: 10rpx;
          animation: particle-fall 0.6s 0.1s infinite;
        }
        
        &:nth-child(2) {
          bottom: 15rpx;
          animation: particle-fall 0.5s 0s infinite;
        }
        
        &:nth-child(3) {
          bottom: 20rpx;
          animation: particle-fall 0.7s 0.2s infinite;
        }
        
        &:nth-child(4) {
          bottom: 25rpx;
          animation: particle-fall 0.4s 0.15s infinite;
        }
        
        &:nth-child(5) {
          bottom: 30rpx;
          animation: particle-fall 0.6s 0.05s infinite;
        }
      }
    }
  }
  
  /* 添加滚动特效 */
  .scroll-effect {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 99;
    
    .star {
      position: absolute;
      width: 10rpx;
      height: 10rpx;
      background: #ffffff;
      border-radius: 50%;
      opacity: 0;
      
      &:nth-child(1) {
        left: 10vw;
        top: 100vh;
        animation: star-fall 0.6s 0.1s linear forwards;
      }
      
      &:nth-child(2) {
        left: 25vw;
        top: 100vh;
        animation: star-fall 0.7s 0.2s linear forwards;
      }
      
      &:nth-child(3) {
        left: 40vw;
        top: 100vh;
        animation: star-fall 0.5s 0.15s linear forwards;
      }
      
      &:nth-child(4) {
        left: 55vw;
        top: 100vh;
        animation: star-fall 0.8s 0.05s linear forwards;
      }
      
      &:nth-child(5) {
        left: 70vw;
        top: 100vh;
        animation: star-fall 0.6s 0.25s linear forwards;
      }
      
      &:nth-child(6) {
        left: 85vw;
        top: 100vh;
        animation: star-fall 0.7s 0.1s linear forwards;
      }
      
      &:nth-child(7) {
        left: 20vw;
        top: 100vh;
        animation: star-fall 0.5s 0.3s linear forwards;
      }
      
      &:nth-child(8) {
        left: 35vw;
        top: 100vh;
        animation: star-fall 0.9s 0.2s linear forwards;
      }
      
      &:nth-child(9) {
        left: 50vw;
        top: 100vh;
        animation: star-fall 0.6s 0.1s linear forwards;
      }
      
      &:nth-child(10) {
        left: 65vw;
        top: 100vh;
        animation: star-fall 0.7s 0.25s linear forwards;
      }
    }
  }

  @keyframes float {
    0% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-8rpx) rotate(2deg);
    }
    100% {
      transform: translateY(0) rotate(0deg);
    }
  }
  
  @keyframes flame {
    0% {
      height: 25rpx;
      opacity: 0.8;
    }
    100% {
      height: 35rpx;
      opacity: 1;
    }
  }
  
  @keyframes rocket-launch {
    0% {
      transform: scale(1) translateY(0);
    }
    100% {
      transform: scale(0.5) translateY(-200rpx);
    }
  }
  
  @keyframes star-fall {
    0% {
      opacity: 0;
      top: 100vh;
    }
    20% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      top: -10rpx;
    }
  }
  
  @keyframes particle-fall {
    0% {
      transform: translateX(-50%) translateY(-10rpx) scale(0.8);
      opacity: 1;
    }
    100% {
      transform: translateX(-50%) translateY(40rpx) scale(0.2);
      opacity: 0;
    }
  }
}
</style> 